<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点我</button>
    <script>
        const btn = document.querySelector("button");
        btn.onclick = function () {
            //内置函数 创建一个ajax
            const xhr = new XMLHttpRequest();
            //打开一个链接,准备发送
            xhr.open('get', './login.php', true);
            //发送请求
            xhr.send();

            // H5提出来一种新的获取数据的方式 onload事件
            xhr.onload = function(){
                console.log(xhr.responseText);
            }



            /*
                readyState === 0    创建ajax对象
                readyState === 1    打开链接,准备发送ajax
                readyState === 2    发送请求,获取响应的数据了
                readyState === 3    解析数据
                readyState === 4    解析完毕,响应的数据可以使用了
            */

            /* 监听 readyState 的变化 */
            // xhr.onreadystatechange = function () {
            //     // console.log(xhr);
            //     // console.log(xhr.readyState);

            //     /* 当readystate 为4的时候, 并且ajax的状态码是
            //        以2开头的三位数的status也是OK 
            //     */

            //     /* 
            //         Ajax的请求是浏览器发送的,浏览器将数据给xhr.responese
            //     */
            //     if(xhr.readyState === 4 && /2\d{2}/.test(xhr.status)){
            //         // console.log(xhr);
            //         console.log(xhr.responseText);
            //     }
            // }






            /* 服务器响应数据,我们前端如何接受ajax */
            /* 获取数据的这个过程是一个异步 */
            // console.log(xhr);
            // console.log(xhr.responseText);

            // console.log("111111111111111");
        }
    </script>
</body>

</html>